<template>
    <div class="immersive-navbar" :style="{ height: navbarHeight + 'px', paddingTop: statusBarHeight + 'px' }">
        <div class="status-bar">
            <div class="status-left">
                <span class="signal"></span>
                <span class="carrier">中国移动</span>
            </div>
            <div class="status-center">
                {{ currentTime }}
            </div>
            <div class="status-right">
                <!-- <span class="wifi"></span> -->
                <span class="battery">
                    <span class="battery-icon"></span>
                    <span class="battery-percent">{{ batteryLevel }}%</span>
                </span>
                <!-- <span class="model">{{ model }}</span> -->
            </div>
        </div>
        <!-- <div class="navbar-title">{{ title }}</div> -->
    </div>
</template>

<script>
/* global plus */
export default {
    name: 'ImmersiveNavbar',
    props: {
        title: { type: String, default: '' }
    },
    data() {
        return {
            statusBarHeight: 0,
            navbarHeight: 24,
            currentTime: '',
            batteryLevel: 10,
            model: 'iPhone 13'
        }
    },
    mounted() {
        if (window.plus && plus.navigator) {
            this.statusBarHeight = plus.navigator.getStatusbarHeight();
        }
        this.updateTime();
        setInterval(this.updateTime, 1000);
        // 模拟电量（可接入plus.battery真实电量）
        // this.getBatteryLevel();
    },
    methods: {
        updateTime() {
            const now = new Date();
            const h = now.getHours().toString().padStart(2, '0');
            const m = now.getMinutes().toString().padStart(2, '0');
            this.currentTime = `${h}:${m}`;
        },
        // getBatteryLevel() {
        //   if (window.plus && plus.battery) {
        //     plus.battery.getStatus(status => {
        //       this.batteryLevel = status.level;
        //     });
        //   }
        // }
    }
}
</script>

<style scoped>
.immersive-navbar {
    width: 375px;
    max-width: 100vw;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.95);
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    z-index: 999;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
}

.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 24px;
    font-size: 12px;
    color: #222;
    padding: 0 12px;
    box-sizing: border-box;
}

.status-left,
.status-center,
.status-right {
    display: flex;
    align-items: center;
}

.status-center {
    flex: 1;
    justify-content: center;
}

.signal {
    width: 18px;
    height: 12px;
    background: url('data:image/svg+xml;utf8,<svg width=\"18\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"0\" y=\"8\" width=\"3\" height=\"4\" fill=\"%23222\"/><rect x=\"5\" y=\"6\" width=\"3\" height=\"6\" fill=\"%23222\"/><rect x=\"10\" y=\"4\" width=\"3\" height=\"8\" fill=\"%23222\"/><rect x=\"15\" y=\"2\" width=\"3\" height=\"10\" fill=\"%23222\"/></svg>') no-repeat center/contain;
    margin-right: 4px;
}

.carrier {
    margin-right: 8px;
}

.wifi {
    width: 16px;
    height: 12px;
    background: url('data:image/svg+xml;utf8,<svg width=\"16\" height=\"12\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M8 12c-2-2-4-3-6-3s-4 1-6 3\" stroke=\"%23222\" stroke-width=\"2\" fill=\"none\"/><circle cx=\"8\" cy=\"12\" r=\"1\" fill=\"%23222\"/></svg>') no-repeat center/contain;
    margin-right: 4px;
}

.battery {
    display: flex;
    align-items: center;
    margin-right: 8px;
}

.battery-icon {
    width: 18px;
    height: 10px;
    border: 1.5px solid #222;
    border-radius: 2px;
    position: relative;
    margin-right: 2px;
}

.battery-icon::after {
    content: '';
    display: block;
    position: absolute;
    right: -3px;
    top: 3px;
    width: 2px;
    height: 4px;
    background: #222;
    border-radius: 1px;
}

.battery-percent {
    font-size: 11px;
}

.model {
    font-size: 11px;
    color: #888;
}

.navbar-title {
    flex: 1;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #222;
    line-height: 44px;
    margin-top: 2px;
}

.page-content {
    width: 375px;
    max-width: 100vw;
    margin: 0 auto;
}
</style>